<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择资源</title>
    
    <link rel="stylesheet" href="less/dist/bootstrap.min.css">
    <link rel="stylesheet" href="less/dist/style.css">
     <link rel="stylesheet" href="less/dist/header.css"> 
    <link rel="stylesheet" href="less/dist/resource.css">
  
</head>
<body>
  
    <header>
        <div>
            <a href="" class='black'></a>
            <span>选择资源</span>
        </div>
    </header>
<section>
    <div class="section-box1">
        <div class="box1-left">
            <p class="cityTitle">三亚5日4晚半自助游套餐</p>
            <p class="time">出发日期:<span>2017-8-8</span></p>
            <p class="pNum">出行人数:<span>4成人</span></p>
        </div>
        <div class="box1-right">
            <p class="price"><i>￥</i><span>6512</span></p>
            <p><a href="#">总额明细></a></p>
        </div>
    </div>
   
    <div class="targetCity">
         <div class="startCity"> 
            <h3>三亚</h3>
            <P>首都国际机场</P>
            <P class="time">6:30</P>
          </div>
        <div class="flight"></div>
           <div class="endCity"> 
            <h3>北京</h3>
            <P>凤凰国际国际机场</P>
            <P class="time">10:40</P>
            </div>  
            <div class="border bottom left"></div>
            <div class="border bottom right"></div>
        </div> 
         
    <div class="travel-time">
        <div class="date clear">
            <div class="travel-left">
                <p class="flight-time">日期</p>
                <p>2017-9-10 星期<span>五</span></p>
            </div>
            <div class="travel-right">
                <p  class="flight-time">时间</p>
                <p><span>6:30</span>am</p>
            </div>
        </div>
        <div class="flight-information clear">
            <div class="travel-left left">
                <p class="flight-time">航班</p>
                <p>中国国航CA1353</p>
            </div>
            <div class="travel-right ">
                <p  class="flight-time">舱位</p>
                <p class="jingjicang">经济舱</p>
            </div>
        </div>
        <div class="flight-time clear">
            <div class="travel-left left">
                <p class="flight-time">飞行时长</p>
                <p>约5小时20分钟</p>
            </div>
            <div class="travel-right">
                <p  class="flight-time">出行人数</p>
                <p class="jingjicang">3人</p>
            </div>
        </div>
        <div class="change-flight clear"> 
            <div class="travel-left left">
                <a class="ticket left">改签/预订航班</a>  
            </div>     
           
                <div class="travel-right right "><a class="reelect right"> 重选航班> </a></div> 
        </div>
        <div class="border top left"></div>
        <div class="border top right"></div>
    </div>
    <div class="targetCity">
        <div class="startCity"> 
           <h3>北京</h3>
           <P>首都国际机场</P>
           <P class="time">8:30</P>
         </div>
       <div class="flight"></div>
          <div class="endCity"> 
           <h3>三亚</h3>
           <P>凤凰国际国际机场</P>
           <P class="time">10:40</P>
           </div>  
           <div class="border bottom left"></div>
           <div class="border bottom right"></div>
       </div> 
        
   <div class="travel-time">
       <div class="date clear">
           <div class="travel-left">
               <p class="flight-time">日期</p>
               <p>2017-9-10 星期<span>六</span></p>
           </div>
           <div class="travel-right">
               <p  class="flight-time">时间</p>
               <p><span>19:30</span>pm</p>
           </div>
       </div>
       <div class="flight-information clear">
           <div class="travel-left left">
               <p class="flight-time">航班</p>
               <p>中国国航CA1353</p>
           </div>
           <div class="travel-right ">
               <p  class="flight-time">舱位</p>
               <p class="jingjicang">经济舱</p>
           </div>
       </div>
       <div class="flight-time clear">
           <div class="travel-left left">
               <p class="flight-time">飞行时长</p>
               <p>约5小时20分钟</p>
           </div>
           <div class="travel-right">
               <p  class="flight-time">出行人数</p>
               <p class="jingjicang">3人</p>
           </div>
       </div>
       <div class="change-flight clear"> 
           <div class="travel-left left">
               <a class="ticket left">改签/预订航班</a>  
           </div>     
          
               <div class="travel-right right "><a class="reelect right"> 重选航班> </a></div> 
       </div>
       <div class="border top left"></div>
       <div class="border top right"></div>
   </div>
   <div class="active-img1">
       <div class="position">
           <p>2成人起订</p>
           <p>每单立减800元</p>
           <p class="computers-msg">
            <input type="button"value="-"class="minus"name="minus">
            <input type="button"value="2"class="number"name="number">
            <input type="button"value="+"class="plus"name="plus">
           </p>
       </div>
   </div>
   <div class="active-img2">
    <div class="position">
        <p>+0元/人&nbsp;免费升级</p>
        <p>价值168元团餐</p>
        <p class="computers-msg">
         <input type="button"value="-"class="minus"name="minus">
         <input type="button"value="3"class="number pink"name="number">
         <input type="button"value="+"class="plus"name="plus">
        </p>
    </div>
   </div>
   <!-- 额外费用 -->
    <div class="extra">
        <div class="extra-bg">
            <h5>附加额外费用账单</h5>
        </div>
        <div class="extra-bottom">
            <div class="extra-box bottom-dashed">
                <div class="extra-left">
                    <p>单房差</p>
                    <p class="extra-p">
                     <input type="button"value="-"class="extra-minus left"name="minus1">
                     <input type="button"value="1"class="extra-number left"name="number1">
                     <input type="button"value="+"class="extra-plus left"name="plus1">
                    </p>
                </div>
                <div class="extra-right">
                    <i>￥</i><span>520</span>/人
                </div>
             
            </div>
            <div class="extra-box ">
                <div class="extra-left">
                    <p>超值换购水上乐园门票</p>
                    <p class="extra-p">
                     <input type="button"value="-"class="extra-minus left"name="minus1">
                     <input type="button"value="1"class="extra-number left"name="number1">
                     <input type="button"value="+"class="extra-plus left"name="plus1">
                    </p>
                </div>
                <div class="extra-right">
                    <i>￥</i><span>50</span>/人
                </div>
             
            </div>
            <div class="extra-box bottom-dashed">
                <div class="extra-left">
                    <p>超值换购天涯海角门票</p>
                    <p class="extra-p">
                     <input type="button"value="-"class="extra-minus left"name="minus1">
                     <input type="button"value="1"class="extra-number left"name="number1">
                     <input type="button"value="+"class="extra-plus left"name="plus1">
                    </p>
                </div>
                <div class="extra-right">
                    <i>￥</i><span>36</span>/人
                </div>
             
            </div>
       <!-- 意外保险 -->
       <div class="insurance">
         <p class="insurance-p1">意外保险</p>
         <p class="insurance-p2">
             <i></i>保险价格均为参考价,最终会以预订人的真实年龄为重新计算
         </p>
       </div>
         <div class="insurance2">
             <div class="insurance2-box1"> 
                    <div class="insurance2-left">
                        <input type="checkbox"/>
                        <span>
                            平安i旅行境内长线保险经典型&nbsp;最高赔偿3000元
                        </span>
                    </div>
                    <div class="insurance2-right">
                       <i>￥</i><span>120</span>2份
                    </div>
                
             </div>
             <div class="insurance2-box2">
                 请您在付款后24小时内提供出现人证件信息,否则将自动为你退订此保险
             </div>
         </div>
         <div class="insurance2">
            <div class="insurance2-box1"> 
                   <div class="insurance2-left">
                       <input type="checkbox"/>
                       <span>
                           平安i旅行境内长线保险尊贵型&nbsp;含航意险140万元
                       </span>
                   </div>
                   <div class="insurance2-right">
                      <i>￥</i><span>154</span>2份
                   </div>
               
            </div>
            <div class="insurance3 clear">
                <a href=""class="">重选保险></a>
            </div>
          
        </div>  
    </div> 
    </div> 
</section>
<footer>
        <a href="fill.html">下一步,填写订单</a>
</footer>
 
    <script src="js/flexible.js"></script>
</body>
</html>